<div class="selectable-card is-rounded no-flex">
  <div class="is-flex-between is-fullwidth card-details" >
    <h3 class="title is-5">{{@title}}</h3>
  </div>
  <div class="has-top-bottom-margin">
    <p class="is-label search-label">{{@searchLabel}}</p>
  </div>
  <SearchSelect
    @id={{id}}
    @models={{@models}}
    @selectLimit='1'
    @backend={{@backend}}
    @fallbackComponent='input-search'
    @onChange={{action 'handleRoleInput' }}
    @inputValue={{get model valuePath}}
    data-test-search-roles
  />
  <button
    type="button"
    class="button is-secondary"
    disabled={{buttonDisabled}}
    onclick={{action "transitionToCredential"}}
    data-test-get-credentials
  >
    {{@title}}
  </button>
</div>
